<template>
  <div>
    <div style="border-bottom:1px black soild">
      <div style="float:left;margin-left:200px">工作区：<el-input v-model="input" placeholder="请输入内容" style="width:40%;"></el-input></div>
      <div style="float:left;margin-left:200px">起止月份： 
        <el-date-picker
        v-model="value"
        align="right"
        type="date"
        placeholder="选择日期"
        :picker-options="pickerOptions">
      </el-date-picker></div>
      <div style="float:left;margin-left:200px">
        <el-row>
          <el-button type="primary">重置</el-button>
          <el-button type="success">搜索</el-button>
        </el-row></div>
    </div>
    <hr>
    <div>
          <Day
        mixtureId="mixtureId"
        :MixtureData="MixtureData"
        :xAxisData="xAxisData"
        :text="value"
      />
    </div>

  </div>
</template>
<script>
import Day from "../../components/day.vue";
import { listDay } from "@/api/system/energy";
export default{
    components: {Day},
       data() {
    return {
      xAxisData: [],
      input: "",
      value: "",
      queryParams: {
        startDate: "2021-03-24",
        endDate: "2021-05-26",
        areaId: "2e6c8e19512d422f961d4ecd783c39f5",
      },
      MixtureData: {
        grid: {
          right: "20%",
        },
        legend: {
          data: [
            "单车能耗成本(元/台)",
            "实际产量",
          ],
        },
        series: [
          {
            name: "单车能耗成本(元/台)",
            type: "bar",
            data: [],
            barWidth: "50%",
          },
          {
            name: "实际产量",
            type: "line",
            yAxisIndex: 1,
            data: [],
            symbolSize: 10,
          },
        ],
      },
    };
  },
    created() {
    this.getList();
  },
    methods: {
      getList() {
      listDay(this.queryParams).then((response) => {
        if (response.lenght != 0) {
          console.log(response);
          response.forEach((item) => {
            this.xAxisData.push(item.date);
            this.MixtureData.series[0].data.push(item.avgEnergy);
            this.MixtureData.series[1].data.push(item.actual);
          });
        }
      });
    },

      pickerOptions(){
          console.log(ddfff);
      },
         /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
  }
}
</script>

<style>
</style>